<template>
  <div id="home">
    <nav-bar>
      <template v-slot:default>图书兄弟</template>
    </nav-bar>
    <tab-control v-show="isTabFixed" @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
    <div class="wrapper">
      <div class="content">
        <div ref="banref">
          <home-swiper  :banners="banners"></home-swiper>
          <recommend-view :recommends="recommends"></recommend-view>
        </div>
        <tab-control @tabClick="tabClick" :titles="['畅销','新书','精选']"></tab-control>
        <goods-list :goods="showGoods"></goods-list>
      </div>
    </div>
    <back-top @bTop="bTop" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
  import HomeSwiper from "./ChildComps/HomeSwiper";
  import NavBar from "components/common/navbar/NavBar";
  import RecommendView from "./ChildComps/RecommendView";
  import TabControl from "components/content/tabControl/TabControl";
  import GoodsList from "components/content/goods/GoodsList";
  import BackTop from "components/common/backtop/BackTop";
  import BScroll from 'better-scroll';
  import {getHomeAllData,getHomeGoods} from "network/home";
  import {ref, onMounted, reactive, computed, watchEffect, nextTick} from "vue";

  export default {
    name: "Home",
    setup(){
      let isTabFixed = ref(false);
      let isShowBackTop = ref(false);
      let banref = ref(null);
      const recommends = ref([]);

      //商品列表数据模型
      const goods = reactive({
        sales:{page:1,list:[]},
        recommend:{page:1,list:[]},
        new:{page:1,list:[]}
      });
      let currentType = ref('sales');

      const showGoods = computed(()=>{
        return goods[currentType.value].list;
      })
      let bsrcoll = reactive({});
      let banners = ref([]);
      onMounted(()=>{
        getHomeAllData().then(res=>{
          recommends.value = res.goods.data;
          banners.value = res.slides;
          // console.log(res.slides);
        });
        getHomeGoods('sales').then(res=>{
          goods.sales.list = res.goods.data;
        })
        getHomeGoods('recommend').then(res=>{
          goods.recommend.list = res.goods.data;
        })
        getHomeGoods('new').then(res=>{
          goods.recommend.list = res.goods.data;
        })
        //创建BtterSrcoll对象
        bsrcoll = new BScroll(document.querySelector('.wrapper'),{
          //当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；
          // 当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；
          // 当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
          // 如果没有设置该值，其默认值为 0，即不派发 scroll 事件。
          probeType:3,
          click:true,//是否允许点击
          pullUpLoad:true//上拉加载更多，默认false
        })
        //触发滚动事件
        bsrcoll.on('scroll',(position)=>{
          console.log(-position.y);
          console.log(banref.value.offsetHeight);
          isShowBackTop.value = isTabFixed.value = -position.y > banref.value.offsetHeight;
        });
        //上拉触发事件 pullingUp
        bsrcoll.on('pullingUp',()=>{
          console.log('上拉加载更多');
          const page = goods[currentType.value].page + 1;
          getHomeGoods(currentType.value,page).then(res=>{
            goods[currentType.value].list.push(...res.goods.data);
            goods[currentType.value].page += 1;
          })
          //完成上拉 等新数据加载完成 展示出来
          bsrcoll.finishPullUp();
          //重新计算高度
          bsrcoll.refresh();
          console.log('当前类型' + currentType.value + '，当前页:' + page);
          console.log(document.querySelector('.content').clientHeight);
        })
      });
      const tabClick = (index)=>{
        let types = ['sales','new','recommend'];
        currentType.value = types[index];
        nextTick(()=>{
          //重新计算高度
          bsrcoll && bsrcoll.refresh();//刷新
        })
      }
      //监听任何一个有变化的变量
      watchEffect(()=>{
        nextTick(()=>{
          //重新计算高度
          bsrcoll && bsrcoll.refresh();//刷新
        })
      })
      //回到顶部
      const bTop = ()=>{
        bsrcoll.scrollTo(0,0,500);
      }
      return{
        recommends,
        tabClick,
        goods,
        showGoods,
        isTabFixed,
        banref,
        isShowBackTop,
        bTop,
        banners
      }
    },
    components:{
      NavBar,
      RecommendView,
      TabControl,
      GoodsList,
      BackTop,
      HomeSwiper
    }
  }
</script>

<style scoped>
  .banners img{
    width: 100%;
    height: auto;
  }
  #home{
    height: 100vh;
    position: relative;
  }
  .wrapper{
    position: absolute;
    top: 45px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;
  }
</style>